<template>
  <div>
    <div class="head">
      <van-icon class="icon1" name="arrow-left" size="20px" @click="router0" />
      <span style="font-size:20px" class="dingdan">我的订单</span>
      <van-icon class="icon2" name="ellipsis" size="20px" />
    </div>
    <van-divider />
    <van-search placeholder="商品名称/商品编号/订单号" />
    <div class="list">
      <van-tabs v-model="activeid">
        <van-tab title="全部">
          <div v-for="(item, index) in list" :key="index">
            <van-cell is-link @click="showPopup">{{item.obj}}</van-cell>
            <van-popup v-model="show">
              <img src="../../assets/image/3.jpg" alt />
            </van-popup>
          </div>
        </van-tab>

        <van-tab title="待付款">
          <div class="card" v-for="(item, index) in cardList" :key="index">
            <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
            >
              <div slot="tags">
                <van-tag plain type="danger">{{item.tag1}}</van-tag>
                <van-tag plain type="danger">{{item.tag2}}</van-tag>
              </div>
              <div slot="footer">
                <van-button size="mini">去付款</van-button>
                <van-button size="mini">查看商品信息</van-button>
              </div>
            </van-card>
          </div>
        </van-tab>

        <van-tab title="待收货">
          <img src="../../assets/image/img.jpg" alt class="img" />
          <p class="warn">您暂时没有相关订单</p>
        </van-tab>

        <van-tab title="已完成">已完成</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      show: false,
      activeid: 0,
      list: [
        {
          url: '../upload/1.jpg',
          obj: '话费充值',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/2.jpg',
          obj: '流量充值',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/3.jpg',
          obj: '加油卡充值',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/4.jpg',
          obj: '游戏充值',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/5.jpg',
          obj: '我的电影票',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/6.jpg',
          obj: '我的火车票',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '/img/7.6eb24c68.jpg',
          obj: '我的机票',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/8.jpg',
          obj: '我的酒店',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/9.jpg',
          obj: '医药服务',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/10.jpg',
          obj: '本地生活服务',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/11.jpg',
          obj: '全新整车',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/12.jpg',
          obj: '彩票订单',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/13.jpg',
          obj: '度假',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/14.jpg',
          obj: '常购清单',
          tag1: '春夏款',
          tag2: '男士短袖'
        },
        {
          url: '../upload/15.jpg',
          obj: '回收站',
          tag1: '春夏款',
          tag2: '男士短袖'
        }
      ],
      cardList: [
        { tag1: '春夏款', tag2: '男士短袖' },
        { tag1: '春夏款', tag2: '男士短袖' },
        { tag1: '春夏款', tag2: '男士短袖' },
        { tag1: '春夏款', tag2: '男士短袖' },
        { tag1: '春夏款', tag2: '男士短袖' },
        { tag1: '春夏款', tag2: '男士短袖' },
        { tag1: '春夏款', tag2: '男士短袖' }
      ]
    }
  },
  created () {
    this.activeid = this.active
  },
  methods: {
    showPopup () {
      this.show = true
    },
    router0 () {
      window.sessionStorage.clear()
      this.$router.push('/vip')
    }
  },
  computed: {
    ...mapState(['active'])
  }
}
</script>

<style>
.head {
  color: #777881;
}
.icon1 {
  margin: 20px;
}
.icon2 {
  float: right;
  margin: 20px;
}
.dingdan {
  margin-left: 23%;
}
.list {
  background-color: #f5f5f5;
  height: 1000px;
}
.img {
  margin-left: 30%;
  margin-top: 50px;
}
.warn {
  text-align: center;
  font-size: 20px;
  color: #8f8f8f;
}
.cart {
  margin: 10px;
}
</style>
